<template>
  <div>
    <el-form :inline="true" :model="form" label-position="right">
      <el-form-item label="设备编号" :label-width="labelWidth">
        <el-input v-model="form.deviceId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="发送增益" :label-width="labelWidth">
        <el-select v-model="form.cain1" placeholder="请选择发送增益">
          <el-option
            :label="index"
            :value="index"
            v-for="(n, index) in 4"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接收增益" :label-width="labelWidth">
        <el-select v-model="form.cain2" placeholder="请选择接收增益">
          <el-option
            :label="index"
            :value="index"
            v-for="(n, index) in 32"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="空中波特率" :label-width="labelWidth">
        <el-select v-model="form.airBaudrate" placeholder="请选择空中波特率">
          <el-option label="250K" :value="0"></el-option>
          <el-option label="1M" :value="1"></el-option>
          <el-option label="2M" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="波特率" :label-width="labelWidth">
        <el-select v-model="form.baudrate" placeholder="请选择波特率">
          <el-option label="4800" :value="0"></el-option>
          <el-option label="9600" :value="1"></el-option>
          <el-option label="19200" :value="2"></el-option>
          <el-option label="38400" :value="3"></el-option>
          <el-option label="57600" :value="4"></el-option>
          <el-option label="115200" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="蜂鸣器状态" :label-width="labelWidth">
        <el-select v-model="form.buzzType" placeholder="请选择蜂鸣器状态">
          <el-option label="关" :value="0"></el-option>
          <el-option label="开" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地感值" value-key="value" :label-width="labelWidth">
        <el-select v-model="form.ioInput" placeholder="请选择地感值">
          <el-option label="无地感" :value="0"></el-option>
          <el-option label="有地感" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="两秒内收到相同ID阀值"
        :label-width="labelWidth"
      >
        <el-select v-model="form.critical" placeholder="请选择阀值">
          <el-option
            :label="index"
            :value="index"
            v-for="(n, index) in 8"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="相同ID过滤时间" :label-width="labelWidth">
        <el-select v-model="form.filterTagTime" placeholder="请选择过滤时间">
          <el-option
            :label="index"
            :value="index"
            v-for="(n, index) in 250"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="韦根数据发送间隔" :label-width="labelWidth">
        <el-select
          v-model="form.sendInterval"
          placeholder="请选择韦根数据的发送间隔"
        >
          <el-option
            :label="index"
            :value="index"
            v-for="(n, index) in 250"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签类型" :label-width="labelWidth">
        <el-select v-model="form.tagType" placeholder="请选择标签类型">
          <el-option
            :label="index"
            :value="index"
            v-for="(n, index) in 250"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备CRC状态" :label-width="labelWidth">
        <el-select v-model="form.crcEn" placeholder="请选择CRC状态">
          <el-option label="取消" :value="0"></el-option>
          <el-option label="有效" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updateDeviceConfig">确 定</el-button>
      <el-button @click="dialogFormVisible">取 消</el-button>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import deviceApi from "@/api/device";
export default {
  name: "BaseDeviceEdit",
  props: {
    deviceCode: 0,
  },
  inject:['closeEdit'],
  data() {
    return {
      loading: false,
      labelWidth: "160px",
      form: {},
      currentPage: 1, //默认显示页面为1
      pageSize: 5, //    每页的数据条数
      pageTotal: 1,
      devices: [],
      devInfo: {},
      onlineDeviceCount: 0,
      offlineDeviceCount: 0,
      deviceSearchForm: {
        deviceState: null,
        deviceCode: null,
        deviceType: null,
        deviceIp: null,
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    //this.show(this.devInfo);
    // this.form = this.devInfo.deviceConfig;
    // this.form.deviceId = this.devInfo.deviceCode;
    this.init();
  },
  methods: {
    init() {
      let root = this;
      root.loading = true;
      deviceApi.getBaseConfig(this.deviceCode).then(
        (response) => {
          root.loading = false;
          if (response.data) {
            this.form = response.data;
          }
        },
        (err) => {
          root.loading = false;
        }
      );
    },
    updateDeviceConfig() {
      let root = this;
      this.loading = true;
      // 点击确定时主页编辑按钮变灰
      this.closeEdit(this.deviceCode,true);
      deviceApi
        .updateDeviceConfig(this.deviceCode, this.form)
        .then(
          (response) => {
            root.loading = false;
            root.dialogFormVisible();
            this.$message({
              message:
                "更新设备配置命令已下发，设备正在重启，大约需要一分钟。",
              type: "success",
            });
          },
          (err) => {
            root.loading = false;
          }
        );
    },
    dialogFormVisible() {
      this.$parent.$parent.$parent.hide();
    },
  },
};
</script>
<style>
.device-list-charts {
  text-align: left;
  margin-top: 20px;
}
.device-list-pagination {
  margin-top: 30px;
}
</style>
